<template>
  <!-- 选择角色 -->
  <el-container class="select-role-container">
    <el-header style="line-height: 60px;">Create Account</el-header>
    <!--   三张水平居中的卡片，用来选择想要注册的角色  -->
    <div style="display: flex;align-items: center;flex-wrap: nowrap;">
      <el-card class="box-card" :class='{"selected-card" : selectedRole === "AGENCY_OWNER"}'
               @click="selectedRole = 'AGENCY_OWNER'">
        <img
            src="@/assets/img/educatorgray.png"
            class="image"
        />
        <div class="add-padding-14">
          <span>机构账号</span>
        </div>
      </el-card>
      <el-card class="box-card" :class='{"selected-card" : selectedRole === "TEACHER"}'
               @click="selectedRole = 'TEACHER'">
        <img
            src="@/assets/img/teachergray.png"
            class="image"
        />
        <div class="add-padding-14">
          <span>老师账号</span>
        </div>
      </el-card>
      <el-card class="box-card" :class='{"selected-card" : selectedRole === "PARENT"}'
               @click="selectedRole = 'PARENT'">
        <img
            src="@/assets/img/parentgray.png"
            class="image"
        />
        <div class="add-padding-14">
          <span>家长账号</span>
        </div>
      </el-card>
    </div>
    <!--   输入邮件或者手机号的一个输入框,绑定值为 account   -->
    <el-form>
      <el-form-item style="margin: 20px 0 20px;">
        <el-input class="account-input" v-model="account" :placeholder="$t('loc.email')"></el-input>
        <div v-show="checkAccountMessage !== '' && checkAccountMessage" class="el-form-item__error">
          {{ checkAccountMessage }}
        </div>
      </el-form-item>
    </el-form>
    <el-button :loading="checkAccounting" style="height: 50px;" type="primary" @click="checkAccount">{{ $t('loc.next') }}</el-button>
    <el-footer>Already have an account?
      <el-link type="primary" @click="toLogin">Sign in</el-link>
    </el-footer>
  </el-container>
</template>

<script>
import {UserRole} from "@/utils/constants.js";
import router from "@/router";
import {validateEMail, validatePhoneTwo} from "@/utils/rules";
import RegisterForm from "@/views/register/RegisterForm.vue";

export default {
  name: "Register",
  // 引入組件 RegisterForm.vue
  components: {RegisterForm},
  data() {
    return {
      account: '',
      email: '',
      phone: '',
      selectedRole: UserRole.AGENCY_OWNER,
      checkAccountMessage: '',
      checkAccounting: false,
    }
  },
  methods: {
    toLogin() {
      router.push({name: 'login'})
    },
    /* 检查账号合法性 */
    checkAccount() {
      this.account = this.account.trim()
      if (this.selectedRole === '') {
        this.$message.error('Please select a role')
        return
      }
      this.phone = ''
      this.email = ''
      if (this.account === '') {
        this.checkAccountMessage = 'Please enter your email or phone number'
        return
      }
      if (validateEMail(this.account)) {
        this.email = this.account
        this.phone = ''
      }
      if (validatePhoneTwo(this.account)) {
        this.phone = this.account
        this.email = ''
      }
      if (this.email === '' && this.phone === '') {
        this.checkAccountMessage = 'Please enter a valid email or phone number'
        return
      }
      this.checkAccounting = true
      $axios.post($api.urls().checkAccount, {
        email: this.email,
        phone: this.phone,
      }).then(res => {
        this.checkAccounting = false
        // 如果账号可用，跳转到注册表单
        if (res.isAvailable) {
          router.push({
            name: 'registerForm',
            query: {
              account: this.account,
              role: this.selectedRole,
            }
          })
        } else {
          this.checkAccounting = false
          this.checkAccountMessage = '账号不可用'
        }
      }).catch(error => {
        this.checkAccounting = false
        console.log(error)
        if (error.message === 'EXIST_PHONE' || error.message === 'EXIST_EMAIL') {
          this.checkAccountMessage = this.$t('loc.haveAccount')
        } else {
          this.checkAccountMessage = error.response.data.direction
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
/* 内容文字居中 上下居中*/
.select-role-container {
  text-align: center;
  width: 500px;
  margin: 0 auto;
  padding: 50px 0;
}

.account-input {
  height: 50px;
  font-size: 18px;
}

.box-card {
  margin: 0 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.el-header {
  font-size: 20px;
  font-weight: 500;
  color: #303133;
  border-bottom: 1px solid #e4e7ed;
}

/* 卡片的綠色選中邊框 */
.selected-card {
  border: 1px solid #42b983;
  background: #f0f9eb;
}

.el-footer {
  padding: 10px 0;
}
</style>